<template>
  <div class="tyf common-details">
    <customDetailsTopbar :title="$route.query.tag + '详情'" flag @back="back" />
    <div class="d-scroll listInner px-1 ">
      <div class="py-1 px-1 bg-white loadingbottom">
        <div v-for="(item, index) in descList" :key="index">
          <template v-if="checkedTag === '碳排放报告管理'">
            <customTitle v-if="item.label" :is-line="true" bg-color="#3795ff" :title="item.label" />
            <div v-for="(it, ind) in item.value" :key="ind" else>
              <custom-details-item :icon="it.icon" :label="it.label" :value="it.value">
                <template #valueSlot>

                  <!-- <el-link v-if="it.label === '附件'" type="primary" @click="handleDownLoad(it.uuid)">{{ it.value }}</el-link> -->
                  <el-link
                    v-if="it.label === '附件'"
                    type="primary"
                    @click="openAttachPopUp([{
                      'fileId': '',
                      'fileName': it.value||'暂无数据',
                      'fileUrl': it.uuid,
                      'fileUuid': ''
                    }])"
                  >查看</el-link>
                  <template v-else-if="it.label === '第三方附件'">
                    <el-link type="primary" @click="openAttachPopUp(it.uuid)">查看</el-link>
                    <!-- <div v-for="(file,inds) in it.uuid" :key="file.fileUuid + inds" style="width: 100%;">
                <el-link type="primary" class="desContent c-text-primary" @click="handleDownLoad(file.fileUrl)">{{ file.fileName }}</el-link>
              </div> -->
                  </template>

                  <span v-else>{{ it.value || '/' }}</span>
                </template>
              </custom-details-item>
            </div>
          </template>
          <template v-else>
            <template v-if="item.field==='performanceCarbonEmission'">
              <custom-details-item class="lengthTitle" :icon="item.icon" :label="item.label" :value="item.value + ''">
                <template>
                  <b class="">
                    {{ item.value }}
                  </b>
                </template>
              </custom-details-item>
            </template>
            <template v-else-if="item.field==='ccerPerformance'">
              <custom-details-item class="lengthTitle" :icon="item.icon" :label="item.label" :value="item.value + ''">
                <template>
                  <b class="">
                    {{ item.value }}
                  </b>
                </template>
              </custom-details-item>
            </template>
            <template v-else>
              <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''">
                <template #valueSlot>
                  <b v-if="!item.isFile" class="">
                    <template v-if="item.label==='余量占比'">
                      {{ item.value }}%
                    </template>
                    <template v-else>{{ item.value }}</template>
                  </b>
                  <template v-else>
                    <!-- <div v-for="(file,ind) in item.value" :key="file.fileUuid + ind" style="width: 100%;">
                    <el-link type="primary" class="desContent c-text-primary" @click="handleDownLoad(file.url)">{{ file.name }}</el-link>
                  </div> -->
                    <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
                  </template>
                </template>
              </custom-details-item>
            </template>
          </template>
        </div>
      </div>
      <attachPopUp ref="attachPopUp" />
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { tpfReportManageView } from '@/api/carbon'
export default {
  mixins: [commonList],
  data() {
    return {
      id: '',
      checkedTag: '',
      descList: [],
      descListMap: {
        碳排放报告管理: [
          {
            label: '基本信息',
            value: [
              { field: 'companyName', label: '企业名称', value: '', icon: '' },
              { field: 'industry', label: '行业类别', value: '', icon: '' },
              { field: 'reportName', label: '报告名称', value: '', icon: '' },
              // { field: 'year', label: '年份', value: '', icon: '' },
              { field: 'compileTime', label: '编制时间', value: '', icon: '' },
              { field: 'reportTime', label: '上传时间', value: '', icon: '' },
              { isFile: true, field: 'attachmentsName', label: '附件', value: '', icon: '' }
            ]
          },
          {
            label: '第三方核查',
            value: [
              { field: 'isThirdpartCheck', label: '是否开展第三方核查', value: '', icon: '' },
              { field: 'thirdpartIdReportName', label: '第三方核查报告名称', value: '', icon: '' },
              { field: 'thirdpartPassTime', label: '核查通过时间', value: '', icon: '' },
              { field: 'thirdpartInstitutionName', label: '第三方检查机构名称', value: '', icon: '' },
              { field: 'thirdpartYear', label: '报告年度', value: '', icon: '' },
              { field: 'thirdpartReportTime', label: '上传时间', value: '', icon: '' },
              { isFile: true, field: 'shareAttachVos', label: '附件', value: '', icon: '' }
            ]
          }
        ],
        配额盈缺分析: [
          { field: 'companyName', label: '企业名称', value: '', icon: '' },
          { field: 'year', label: '年份', value: '', icon: '' },
          { field: 'isIntoCarbon', label: '是否纳入碳排放交易系统', value: '', icon: '' },
          { field: 'recordDate', label: '登记日期', value: '', icon: '' },
          { field: 'validity', label: '截至有效期', value: '', icon: '' },
          { field: 'foreQuotas', label: '预分配配额（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'approvedQuotas', label: '核定配额（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'carbonEmission', label: '碳排放量（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'quotasAllowance', label: '配额盈缺（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'allowancePercentage', label: '余量占比', value: '', icon: '' }
        ],
        履约登记管理: [
          { field: 'companyName', label: '企业名称', value: '', icon: '' },
          { field: 'year', label: '年份', value: '2023年', icon: '' },
          { field: 'carbonEmission', label: '碳排放量（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'performanceCarbonEmission', label: `配额履约清缴涉及的碳排放量（吨二氧化碳当量）`, value: '', icon: '' },
          { field: 'oughtQuotas', label: '应清缴配额量（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'ccerPerformance', label: '其中CCER项目履约量<br>（吨二氧化碳当量）', value: '', icon: '' },
          { field: 'oughtSendQuotas', label: '应发放配额量（吨二氧化碳当量）', value: '', icon: '' },
          { isFile: true, field: 'shareAttachVos', label: '操作', value: '', icon: '' }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const { id, tag } = this.$route.query
      this.id = id
      this.checkedTag = tag
      this.descList = this.descListMap[tag]
      this.getDetail()
    })
  },
  methods: {
    back() {
      this.$router.replace({
        path: '/staging/performance',
        query: { current: this.$route.query.current, tag: this.$route.query.tag }
      })
    },
    getDetail() {
      this.layout.showAreaLoading(['.loadingbottom '])
      if (this.checkedTag === '碳排放报告管理') {
        this.tpfReportManageView()
      } else {
        const data = this.$route.query
        if (data) {
          this.descList.map((v) => {
            if (v.field === 'shareAttachVos') {
              v.uuid = data[v.field.replaceAll('Name', 'Uuid')]
            }
            v.value = data[v.field] ? data[v.field] : ''
          })
        }
      }
      this.layout.hideAreaLoading(['.loadingbottom '])
    },
    async tpfReportManageView() {
      const { status, data } = await tpfReportManageView({ id: this.id })
      if (status === 0 && data) {
        this.descList.forEach((desc) => {
          desc.value.forEach((v) => {
            v.value = data[v.field] ? data[v.field] + '' : v.value
            if (v.isFile) {
              v.uuid = data[v.field.replaceAll('Name', 'Uuid')]
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tyf {
  .detailItem {
    .label {
      max-width: 80%;
    }
  }
}
::v-deep  .lengthTitle .label{
  max-width: 55%;
  white-space: inherit !important;
}
::v-deep  .lengthTitle2 .label{
  max-width: 40%;
  white-space: inherit !important;
}
::v-deep  .lengthTitle b{
  line-height: 0.96rem;
}
// ::v-deep .detailItem .label{
//   white-space: inherit !important;
// }
</style>
